.categoriesbox {
    width: 100%;
    display: grid;
    grid-auto-rows: auto;
    background-color: var(--sec-bg);
    border-radius: 20px;
    grid-template-columns: repeat(auto-fit, clamp(85px, 20vw, 200px));
    justify-content: center;
    padding: clamp(10px, 1vw, 20px);
    gap: clamp(10px, 1vw, 20px);
    border: 1px solid var(--pale-txt);

    a {
        text-decoration: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: clamp(85px, 20vw, 200px);
        height: auto;

        .categorywrapper {
            height: 100%;
            width: 100%;
            position: relative;
            overflow: hidden;
            border-radius: clamp(5px,1.5em,20px);
            box-shadow: 0 0 5px 1px var(--shadow);

            img {
                width: 100%;
                transition: transform 0.25s ease-in-out;
            }
            
            .categorytitle {
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 20%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--transparent-bg);
                backdrop-filter: blur(8px);
                color: var(--accent-txt);
            }
        }
    }

    a:hover {
        img {
            transform: scale(1.1);
        }
    }

    .emptyplaceholder {
        min-height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: xx-large;
        font-family: var(--accent-font-family);
        color: var(--pale-txt);
    }

}